
<!DOCTYPE html>
<html>
    <head>
        <title>Alarm</title>
        <meta charset="UTF-8">   
        <style>
            .formpane {
                top: 10px;
                right: 10px;   
                background: rgba(200, 200, 200, 0.3);
            } 
        </style>                 
        <script src="../../../../lib/core/ht.js"></script>         
        <script src="../../../../lib/plugin/ht-form.js"></script> 
        <script>                                        
            function init(){       
                ht.Default.setImage('server', '');            
                
                dataModel = new ht.DataModel();                                
                g3d = new ht.graph3d.Graph3dView(dataModel);
                g3d.setGridVisible(true);
                g3d.setEye(200, 300, 600);
                g3d.setCenter(0, 100, 0);
                g3d.addToDOM();                                                    
                
                var ringModel = ht.Default.createRingModel([
                    45, 10,
                    50, 10,
                    50, -10,
                    45, -10,
                    45, 10
                ], null, null, false, false, 30);                
                var sphereModel = ht.Default.createSmoothSphereModel(8, 8, 0, Math.PI*2, 0, Math.PI, 10);
                var cylinderModel = ht.Default.createSmoothCylinderModel(8, true, true, 5, 10, 0, Math.PI*2, 50);
                var array = [
                    {
                        shape3d: ringModel,  
                        color: { func: 'style@all.blend' },
                        r3: [Math.PI/2, 0, 0]
                    },
                    {
                        shape3d: sphereModel,
                        color: { func: 'style@all.blend' },
                        t3: [0, 30, 0]
                    },
                    {
                        shape3d: cylinderModel, 
                        color: { func: 'style@all.blend' },
                        t3: [0, -10, 0]
                    }
                ];
                
                ht.Default.setShape3dModel('alarm', {
                    shape3d: array,                       
                    t3: [0, 50, 0],
                    r3: {func: function(data){
                         return [
                             data.a('alarm.rotation.x'), 
                             data.a('alarm.rotation.y'), 
                             data.a('alarm.rotation.z')];
                    }}
                });                 
                
                node = new ht.Node();                
                node.a({
                    'alarm.rotation.x': 0,
                    'alarm.rotation.y': Math.PI/4,
                    'alarm.rotation.z': 0
                });
                node.s({
                    'all.blend': 'red',
                    'all.color': '#757475',
                    'front.image': 'server'                    
                });
                node.addStyleIcon('alarm', {
                   position: 3,
                   face: 'center',
                   shape3d: 'alarm'                   
                });  
                node.p3(0, 100, 0);
                node.s3(80, 200, 80);
                dataModel.add(node);                                                    
                
                formPane = new ht.widget.FormPane();
                formPane.setWidth(250);
                formPane.setHeight(120);    
                formPane.getView().className = 'formpane';              
                document.body.appendChild(formPane.getView());  
                
                formPane.addRow([
                    'Rotation X', 
                    {
                        slider: {                    
                            min: 0,
                            max: Math.PI*2,
                            value: node.a('alarm.rotation.x'),                            
                            onValueChanged: function(){     
                                 node.a('alarm.rotation.x', this.getValue());                               
                            }
                        }
                    }
                ], [0.1, 0.15]);                
                formPane.addRow([
                    'Rotation Y', 
                    {
                        slider: {                    
                            min: 0,
                            max: Math.PI*2,
                            value: node.a('alarm.rotation.y'),                            
                            onValueChanged: function(){     
                                 node.a('alarm.rotation.y', this.getValue());                               
                            }
                        }
                    }
                ], [0.1, 0.15]);  
                formPane.addRow([
                    'Rotation Z', 
                    {
                        slider: {                    
                            min: 0,
                            max: Math.PI*2,
                            value: node.a('alarm.rotation.z'),                            
                            onValueChanged: function(){     
                                 node.a('alarm.rotation.z', this.getValue());                               
                            }
                        }
                    }
                ], [0.1, 0.15]);  
                formPane.addRow([
                    'Alarm Color', 
                    {
                        colorPicker: {
                            instant: true,
                            value: node.s('all.blend'),
                            onValueChanged: function(){
                                node.s('all.blend', this.getValue());
                            }
                        }
                    }
                ], [0.1, 0.15]); 
            }
        </script>
    </head>
    <body onload="init();">
    </body>
</html>
